import React, { Component } from 'react';
import { Layout, Tooltip, message } from 'antd';
import Icon from '@ant-design/icons';
import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
import "./common.scss"

//通用圆形图标
interface IconProps {
	children: any,
	onClick?: () => void
	title: string
	placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
	style?: React.CSSProperties
	size?: number
	fontSize?: number
}
export const IconTool = ({ children, onClick, title, placement, style, size, fontSize }: IconProps) => {
	return <Tooltip placement={placement} title={title}>
		<div className='icon' style={{
			...style,
			width: `${size}px`,
			height: `${size}px`,
			fontSize: `${fontSize}px`
		}} onClick={onClick}>{children}</div>
	</Tooltip>
}


interface Svgprops {
	svg: React.SVGProps<SVGSVGElement> | React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>> | React.ForwardRefExoticComponent<CustomIconComponentProps>
	props?: Partial<CustomIconComponentProps>
}
/**svg转换为icon组件 */
export const SvgtoIcon = ({ svg, props }: Svgprops) => {
	const Svg = () => (<>{svg}</>)
	return <Icon component={Svg} {...props} />
}